<template>
	<view>
		<view style="padding-bottom: 200rpx;">
			<view class="header w-p-100 flex flex-column flex-x-space-between">
				<view :style="'padding-top:' +(statusHeight + 5)+'px;'" class="ml-16 fs-16 flex flex-y-center fw-600">
					<text class="">{{WEBCONFIG?.index_text}}</text>
					<text class="text-blue-1  fs-20 ml-4">{{$tool.daysUntilDate(WEBCONFIG?.index_date)}}</text>
					<text class="text-blue-1">天</text>

				</view>
				<view class="px-16 box-sizing">
					<view
						class="bg-white box-sizing border-black rounded-20 py-1 mt-10  flex flex-y-center fs-14 px-12 w-p-100 flex-x-space-between">
						<view class="flex flex-y-center " @click="$page.open('/pages/topic/search')">
							<uv-icon name='search' size="33" color="#000"></uv-icon>
							<input placeholder="请输入关键字" placeholder-style="color:#000;" class="ml-2"
								placeholder-class='text-black' disabled />
						</view>
						<view class="flex flex-y-center w-50 box-sizing text-right pl-8"
							style="border-left: 1px solid #000;">
							<text>搜索</text>
						</view>
					</view>
				</view>
				<view class="px-12 mt-20">
					<view class="bg-white rounded-12">
						<swiper autoplay interval="2000" circular style="height: 300rpx;" class="w-p-100">
							<swiper-item class="rounded-12 h-p-100 w-p-100" v-for="(item,index) in props.adsList"
								:key='index'>
								<image class="h-p-100 w-p-100" :src='item.image_url'></image>
							</swiper-item>
							<!-- #ifdef MP-WEIXIN -->
							<swiper-item class="rounded-12"
								v-if="WEBCONFIG?.weixin_banner_status && WEBCONFIG?.weixin_banner_status == 1">
								<ad :unit-id="WEBCONFIG?.weixin_banner_ad_id" ad-theme="white"></ad>
							</swiper-item>
							<!-- #endif -->
							<!-- #ifdef MP-TOUTIAO -->
							<swiper-item class="rounded-12"
								v-if="WEBCONFIG?.douyin_banner_status && WEBCONFIG?.douyin_banner_status == 1">
								<ad :unit-id="WEBCONFIG?.douyin_banner_ad_id" ad-theme="white"></ad>
							</swiper-item>
							<!-- #endif -->
						</swiper>
					</view>
				</view>

				<view class="px-12 mt-10">
					<view class="py-4 px-12 rounded-8  bg-white flex flex-y-center">
						<image src="@/static/icon/ttzx.png" class="w-24 h-26 "></image>
						<view class="w-1 h-30 bg-grey-4 ml-8"></view>
						<view class="w-p-90">
							<uv-notice-bar :icon="false" bgColor="#fff" color="#000"
								:text="props.notice"></uv-notice-bar>
						</view>
					</view>
				</view>
			</view>
			<view class="px-12 mt-12">
				<view class="flex flex-wrap ">
					<view v-for="(item,index) in navList" :key="index" @click="onClick(item)"
						class="flex flex-column flex-center w-p-25 mt-8">
						<image :src="item.image_index2" class="w-46 h-49"></image>
						<text class="fs-14 fw-500 mt-6">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="px-12 flex flex-x-space-between mt-16">
				<image src="/static/icon/tklx.png" class="w-170 h-95" @click="$page.open('/pages/topic/category')">
				</image>

				<image src="/static/icon/xsks.png" class="w-170 h-95" @click="$page.open('/pages/testPaper/list')">
				</image>
			</view>

			<view class="flex flex-x-space-between fs-16 mt-20 box-sizing"
				v-if="WEBCONFIG?.data_show=='1'&& USERINFO?.id">
				<view class="flex flex-y-center">
					<view class="w-4 h-15 bg-blue-1 rounded-right-4"></view>
					<text class="ml-4">刷题进度</text>
				</view>
				<view class="flex flex-y-center mr-12" @click="$page.open('/pages/topic/category')">
					<text class="text-blue-1 mr-4">继续刷题</text>
					<image src="@/static/icon/jxst.png" class="w-16 h-16"></image>
				</view>
			</view>
			<view class="px-12 " v-if="WEBCONFIG?.data_show=='1'&& USERINFO?.id">
				<y-data ref="data" @clear="clear"></y-data>
			</view>

			<view class="p-12 mt-12 bg-white" v-if="articleList.length>0&& WEBCONFIG?.custom_article=='1'">
				<view class="flex flex-x-space-between  ">
					<image :src="WEBCONFIG?.rmzx" class="h-19" mode="heightFix"></image>
					<view class="flex flex-y-center" @click="$page.switch('/pages/article/article')">
						<text class="fs-12 text-grey-4">查看更多</text>
						<uv-icon name="arrow-right" color="#acacac"></uv-icon>
					</view>
				</view>

				<view class="flex flex-column grid-gap-10 mt-14">
					<view class="flex " v-for="(item,index) in articleList" :key="index"
						@click="$page.open('/pages/article/detail?id='+item.id)">
						<view class="w-110 h-70">
							<image class="w-110 h-70 rounded-6" mode="aspectFit" :src="item.image"></image>
						</view>
						<view class="flex flex-column ml-15">
							<text class="fs-14 text-ellipsis-2">{{item.name}}</text>
							<text class="fs-12 text-grey-4 pt-4 text-ellipsis-2">{{item.desc}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
				<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="ad" v-if="WEBCONFIG?.douyin_video_status && WEBCONFIG?.douyin_video_status == 1">
				<ad :unit-id="WEBCONFIG?.douyin_video_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps, onMounted, defineExpose, defineEmits } from 'vue'
	import { $page, $tool, $http } from '@/utils'
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const { USERINFO } = useRefs(useUserStore());
	// #ifndef H5
	const statusHeight = uni.getMenuButtonBoundingClientRect().top
	// #endif
	// #ifdef H5
	const statusHeight = 10
	// #endif

	const emit = defineEmits(['sign', 'changeClass', 'clear'])
	const info = ref()
	const all = ref(0)
	const answer = ref(0)
	const data = ref()
	const articleList = ref([])
	const props = defineProps({
		adsList: {
			default: [],
			type: Array
		},
		notice: {
			default: '',
			type: String
		},
		navList: {
			default: [],
			type: Array
		},
		sign: {
			default: false,
			type: Boolean
		}
	})


	onMounted(() => {
		getList()
	})


	const getList = () => {
		$http.get('Article/getList', { limit: 5 }).then(res => {
			articleList.value = res.data
		})
	}


	const onClick = (e) => {
		if (e.type == 1) {
			$page.switch(e.path)
			return;
		}
		$page.open(e.path + '?' + e.param || '')
	}

	const update = () => {
		data.value.getRecord()
	}
	const changeClass = () => {
		emit('changeClass')
	}
	const clear = () => {
		emit('clear')
	}
	const sign = () => {
		emit('sign')
	}
	defineExpose({ update })
</script>

<style scoped>
	.header {
		height: 700rpx;
		background: radial-gradient(300% 100% at 0% 15%, rgba(120, 221, 255, 0.3) 0%, rgba(255, 230, 233, 0) 35%, rgba(255, 238, 240, 0) 100%);
		background-repeat: no-repeat;
		background-position: top center;
	}

	.h-95 {
		height: 184rpx;
	}
</style>